<template>
  <div class="jlszbox">
    <div class="jlszboxleft" v-if="taskids != 11">
      <!-- 背景 -->
      <img src="@/images/jlszbox.png" alt="" class="jlszbjimg" />
      <!-- 表格列表 -->
      <div class="liebox beautifulScroll">
        <div
          class="lieitem"
          :ref="'lbs' + item.id"
          :class="{
            lieitems: item.id % 2 === 0,
            lieitemac: mklbid === item.id
          }"
          v-for="item in mklbdata"
          :key="item.id"
          @click="mklbfn(item.id)"
        >
          <div class="lieitemid">{{ item.id }}</div>
          <div class="lieitemname">{{ item.name }}</div>
        </div>
      </div>
      <!-- 表格数据部署 -->
      <div class="lbkv" ref="kv">{{ kv }}</div>
      <div class="lbugv" ref="ugv">{{ ugv }}</div>
    </div>
    <div class="jlszboxright">
      <!-- 背景 -->
      <img src="@/images/jlszbox1.png" alt="" class="jlszbjimg1" />
      <!-- 输入框 -->
      <el-input
        v-for="item in mkroidata"
        :key="item"
        v-model="mkroi[item]"
        :ref="'mkroi' + item"
        placeholder="输入"
        :class="[
          'mkroi1',
          'mkroi' + item,
          { 'roi-error': mkroiError[item - 1] }
        ]"
        @focus="focusfn(item)"
      ></el-input>

      <div class="tool dgjtoolqdsss" @click="mkcheckRoi">
        <img src="@/images/qds.png" alt="" class="normal" />
        <img src="@/images/qdsac.png" alt="" class="active" />
      </div>
    </div>
    <!-- 播放视频按钮 -->
    <div class="bfdiv" v-if="taskids == 11" @click="openVideo"></div>
    <!-- 跳过 -->
    <!-- <div class="tool tigbox" @click="tgfn" v-show="tgshow">
      <img src="@/images/tg.png" alt="" class="normal" />
      <img src="@/images/tgac.png" alt="" class="active" />
    </div> -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  props: {
    taskids: {
      type: Number
    }
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      mkroiError: [false, false, false, false, false, false, false, false],
      mkroiErrorCount: 0,
      mkroiAnswer: [
        0.846, 4.761, 9.245, 18.14, 28.56, 2339.331, 4754.702, 8138.708,
        14855.573, 19561.566, 0.99
      ],
      mkroidata: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
      mkroi: {},
      mklbdata: [
        {
          id: 1,
          name: '70KV、1.6mAs'
        },
        {
          id: 2,
          name: '70KV、8mAs'
        },
        {
          id: 3,
          name: '70KV、16mAs'
        },
        {
          id: 4,
          name: '70KV、32mAs'
        },
        {
          id: 5,
          name: '70KV、50mAs'
        }
      ],
      mklbid: 1,
      kv: 60.13,
      ugv: 0.846,
      tgshow: true
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    mklbid: {
      handler(i, old) {
        if (old != 0 && this.taskids != 11) {
          this.$refs[`mkroi${old}`][0].$el.classList.remove('tymb')
        }
      },
      deep: true
      //   immediate: true
    },
    taskids: {
      handler(i) {
        if (i == 11) {
          // 只填充有答案的项
          this.mkroidata
            .slice(0, this.mkroiAnswer.length)
            .forEach((item, i) => {
              if (i >= 5) {
                return
              }
              if (
                this.mkroiAnswer[i] !== null &&
                this.mkroiAnswer[i] !== undefined
              ) {
                this.mkroi[item] = this.mkroiAnswer[i]
              }
            })
        }
      },
      deep: true,
      immediate: true
    }
  },
  //方法集合
  methods: {
    focusfn(i) {
      this.$refs.ugv.classList.remove('tymb')
      this.$refs[`mkroi${i}`][0].$el.classList.remove('tymb')
      this.$emit('tiptextfn', '')
    },
    tgfn() {
      const { mkroidata, mkroiAnswer } = this

      // 遍历所有输入框对应的编号（mkroidata中的项）
      mkroidata.slice(0, mkroiAnswer.length).forEach((item, index) => {
        const answer = mkroiAnswer[index]
        // 核心逻辑：跳过编号能被5整除的输入框（item是输入框编号，如5、10、15...）
        if (item >= 6) {
          return
        }

        // 只给有有效答案的输入框赋值，并用$set确保响应式
        if (answer !== null && answer !== undefined) {
          this.$set(this.mkroi, item, answer) // 关键修复：使用$set保证响应式
          console.log(`编号为${item}的输入框已赋值：${answer}`)
        }
      })

      this.tgshow = false
      this.$refs.ugv.classList.remove('tymb')
      this.$refs.mkroi1[0].$el.classList.remove('tymb')
      this.$refs.lbs1[0].classList.remove('tymbs')
      this.$emit('tiptextfn', '')
    },
    mklbfn(id) {
      this.mklbid = id
      this.$refs.ugv.classList.add('tymb')
      this.$refs[`mkroi${id}`][0].$el.classList.add('tymb')
      this.$refs.lbs1[0].classList.remove('tymbs')
      this.ugv = this.mkroiAnswer[id - 1] ?? null
    },
    mkcheckRoi() {
      let hasError = false
      const errorArr = []
      const { mkroidata, mkroiAnswer, mkroiError } = this // 解构赋值简化访问
      // 如果是11的时候才校验所有
      // 校验所有输入项
      mkroidata.forEach((item, index) => {
        if (this.taskids != 11 && index >= 5) {
          return
        }
        const answer = mkroiAnswer[index]
        // 跳过无答案的项
        if (answer === null || answer === undefined) return

        const inputValue = Number(this.mkroi[item])
        const isError = inputValue !== answer

        this.$set(mkroiError, index, isError)

        if (isError) {
          hasError = true
          errorArr.push(index)
        }
      })

      if (hasError) {
        this.mkroiErrorCount++
        // 错误提示闪烁效果
        setTimeout(() => {
          errorArr.forEach((idx) => this.$set(mkroiError, idx, false))
        }, 400)

        // 三次错误后自动填充正确答案并跳转
        if (this.mkroiErrorCount >= 3) {
          this.tgshow = false
          // 只填充有答案的项
          mkroidata.slice(0, mkroiAnswer.length).forEach((item, i) => {
            if (this.taskids != 11 && i >= 5) {
              return
            }
            if (mkroiAnswer[i] !== null && mkroiAnswer[i] !== undefined) {
              this.mkroi[item] = mkroiAnswer[i]
            }
          })

          // 使用箭头函数简化定时器
          setTimeout(() => {
            this.$emit('jlsfn')
          }, 2000)
        }
      } else {
        this.mkroiErrorCount = 0
        this.$emit('jlsfn')
      }
      if (this.taskids != 11) {
        this.$refs.ugv.classList.remove('tymb')
        this.$refs.mkroi1[0].$el.classList.remove('tymb')
        this.$refs.lbs1[0].classList.remove('tymbs')
      }
      this.$emit('tiptextfn', '')
    },
    openVideo() {
      this.$emit('openVideo')
    }
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.taskids == 11) {
      return
    }
    this.$refs.lbs1[0].classList.add('tymbs')
    this.$refs.ugv.classList.add('tymb')
    this.$refs.mkroi1[0].$el.classList.add('tymb')
  }
}
</script>
<style scoped>
::v-deep .mkroi1 {
  position: absolute !important;
  left: 177px;
  top: 356px;
  width: 58px !important;
  background: #eeeeee;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(196, 195, 195, 0.795);
  font-size: 13px;

  /* transparent */
}
::v-deep .mkroi1 .el-input__inner {
  height: 36px !important;
  border: none !important;
  border-radius: 0px;
  background-color: transparent;
  color: #000000 !important;
  padding: 0px !important;
  padding-left: 2px !important;
}
::v-deep .roi-error .el-input__inner {
  color: red !important;
}
.mkroi2 {
  left: 248px !important;
}
.mkroi3 {
  left: 316px !important;
}
.mkroi4 {
  left: 384px !important;
}
.mkroi5 {
  left: 454px !important;
}
.mkroi6 {
  left: 177px;
  top: 410px;
}
.mkroi7 {
  left: 248px !important;
  top: 410px;
}
.mkroi8 {
  left: 316px !important;
  top: 410px;
}
.mkroi9 {
  left: 384px !important;
  top: 410px;
}
.mkroi10 {
  left: 454px !important;
  top: 410px;
}
.mkroi11 {
  width: 329px !important;
  left: 179px !important;
  top: 475px !important;
}

.liebox {
  position: absolute;
  width: 228px;
  height: 543px;
  top: 70px;
  left: 28px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.lieitem {
  width: 228px;
  height: 30px;
  background-color: #fff;
  display: flex;
  line-height: 30px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #cfcfcf;
}
.lieitems {
  background-color: #eff0f1;
}
.lieitemid {
  width: 31px;
  border-right: 1px solid #cfcfcf;
}
.lieitemname {
  padding-left: 10px;
  width: 180px;
}
.lieitemid {
  font-weight: 700;
  text-align: center;
}
.lieitemac {
  color: #ffff;
  background-color: #48abff;
}
.lbugv {
  font-size: 34px;
  width: 100px;
  height: 50px;
  position: absolute;
  left: 285px;
  top: 150px;
  text-align: center;
}
.lbkv {
  font-size: 34px;
  width: 100px;
  height: 50px;
  position: absolute;
  left: 475px;
  top: 150px;
  text-align: center;
}
.tigbox {
  position: absolute;
  bottom: -40px;
}
.tigbox img {
  width: 140px;
  height: 53px;
}
.dgjtoolqdsss {
  cursor: pointer;
  position: absolute;
  bottom: 55px;
  left: 50%;
  transform: translate(-50%, 0);
}
.dgjtoolqdsss img {
  width: 79px;
  height: 38px;
}
.bfdiv {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 115px;
  bottom: 135px;
  cursor: pointer;
}
</style>
<style>
/* ROI输入错误样式 */
.roi-error {
  animation: roi-flash 0.4s 2;
  border: 1px solid #ff0000 !important;
  color: red !important;
  background: #ffe2e2 !important;
}

@keyframes roi-flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
